<template>
  <div class="regist">
    <div class="box">
        <p class="title">LUCKY连锁超市</p>
        <el-input v-model="username" placeholder="请输入用户名"></el-input>
        <el-input v-model="password" placeholder="请输入密码"></el-input>
        <el-input v-model="email" placeholder="请输入邮箱"></el-input>
      <el-button class="submit" type="primary" @click="sender">发送验证码</el-button>
        <el-input v-model="code" placeholder="请输入验证码"></el-input>
        <el-button class="submit" type="primary" @click="submit">注册</el-button>
    </div>


    <template>
      <el-button type="text" @click="successMsg()"></el-button>
    </template>


  </div>
</template>

<script>
import request from "@/utils/request" //引入request（包装好的axios）来发起请求
export default {
  name: 'Regist',
  data(){
      return{
        username:'',
        password:'',
        email:'',
        code:'',
      }
  },
  methods:{
    submit(){
      let that = this
      request({
        url:'/api/user/register',
        data:{
          username: that.username,
          password: that.password,
          email:that.email,
          code:that.code
        },
        method:"POST",
      })
          .then(function (res) {
            that.$tip(res.data.resultCode);
            if(res.data.resultCode.code==20011){
              that.successMsg();
            }
          })
          .catch(function (error) {
            that.$tip(error.data.resultCode);
          });
    },
    sender(){
      let that = this
      request({
        url:'/api/user/sendEmail',
        params:{
          email: that.email,
        },
        method:"get",
      })
          .then(function (res) {
            that.$tip(res.data.resultCode);
          })
          .catch(function (error) {
            that.$tip(error.data.resultCode);
          });
    },
      successMsg() {
        let that = this
        that.$confirm('恭喜你！注册成功，是否前往登录页面~',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.$router.replace('/login');
        }).catch(() => {
                 
        });
      }



  }
}
</script>

<style scoped>
.regist{
  height: 100vh;
  background-image: url('../../assets/background.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box{
  width: 500px;
  height: 600px;
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
}
.title{
  font-size: 24px;
  text-align: center;
  font-weight: 900;
  color: rgb(44, 104, 84);
}
.submit{
  width: 120px;
  margin: 20px 190px;
}
.el-input{
  margin: 10px 0;
}
</style>
